﻿
@{
    ViewData["Title"] = "Detail";
    Layout = "~/Views/Shared/MyMasterPage.cshtml";
}
<link rel="stylesheet" href="~/car/css/master.css"/>
<style>
    .js-slider-nav .img-scale {
        border: 2px solid #fff;
    }
    .js-slider-nav .slick-current {
        border: 2px solid #ff0000;
    }
</style>

<div id="detail">

    <div id="loadingDiv" style=" display:none">
        <div id="over" style=" position: absolute;top: 0;left: 0; width: 100%;height: 100%; background-color: #000;opacity:0.7;z-index: 1000;"></div>
        <div id="layout" style="position: absolute;top: 20%; left: 40%;width: 20%; height: 20%;  z-index: 1001;text-align:center;">
            <h1><i class="fa fa-check text-white"></i></h1><br />
            <h2 style="color: #fff;">提交成功，感谢你的评论！</h2>
        </div>
    </div>
    <div class="container" style="margin-top: 30px; ">
        <section class="b-goods-f">
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="ui-title text-uppercase">{{item.MotoTitle}}</h1>
                </div>

            </div>

            <div class="row">
                <div class="col-lg-8" style=" background:#fff;">

                    <div class="b-goods-f__slider" style=" background:#f1f3f7; padding-bottom:10px;">

                        <!-------图片区域-------->
                        <div class="ui-slider-main js-slider-for">
                            <img class="img-scale" v-for="i in images" :src="i" />
                            <img class="img-scale" v-for="i in images" :src="i" />
                        </div>
                        <div class="ui-slider-nav js-slider-nav">
                            <img class="img-scale" v-for="i in images " :src="i" />
                            <img class="img-scale" v-for="i in images" :src="i" />
                        </div>
                    </div>
                    <h2 class="b-goods-f__title">基本配置</h2>
                    <div class="row">
                        <div class="col-md-6">
                            <dl class="b-goods-f__descr row">
                                <dt class="b-goods-f__descr-title col-lg-5 col-md-12">产品名称</dt>
                                <dd class="b-goods-f__descr-info col-lg-7 col-md-12">{{item.MotoTitle}}</dd>
                                <dt class="b-goods-f__descr-title col-lg-5 col-md-12">型式</dt>
                                <dd class="b-goods-f__descr-info col-lg-7 col-md-12">{{item.MotoXingshi}}</dd>
                                <dt class="b-goods-f__descr-title col-lg-5 col-md-12">颜色分类</dt>
                                <dd class="b-goods-f__descr-info col-lg-7 col-md-12">{{item.MotoColor}}</dd>
                                <dt class="b-goods-f__descr-title col-lg-5 col-md-12">轴距</dt>
                                <dd class="b-goods-f__descr-info col-lg-7 col-md-12">{{item.MotoAuthor}}</dd>
                                <dt class="b-goods-f__descr-title col-lg-5 col-md-12">最大扭矩</dt>
                                <dd class="b-goods-f__descr-info col-lg-7 col-md-12">{{item.MotoNiuju}}</dd>
                                <dt class="b-goods-f__descr-title col-lg-5 col-md-12">指导价</dt>
                                <dd class="b-goods-f__descr-info col-lg-7 col-md-12">{{item.MotoPrice1}}</dd>

                                <dt class="b-goods-f__descr-title col-lg-5 col-md-12">整备质量</dt>
                                <dd class="b-goods-f__descr-info col-lg-7 col-md-12">{{item.MotoZhiliang}}</dd>
                                <dt class="b-goods-f__descr-title col-lg-5 col-md-12">最大功率</dt>
                                <dd class="b-goods-f__descr-info col-lg-7 col-md-12">{{item.MotoGonglv}}</dd>
                                <dt class="b-goods-f__descr-title col-lg-5 col-md-12">油箱容积</dt>
                                <dd class="b-goods-f__descr-info col-lg-7 col-md-12">{{item.MotoYxrl}}</dd>
                            </dl>
                        </div>
                        <div class="col-md-6">
                            <dl class="b-goods-f__descr row">
                                <dt class="b-goods-f__descr-title col-lg-5 col-md-12">制动方式</dt>
                                <dd class="b-goods-f__descr-info col-lg-7 col-md-12">{{item.MotoQzd}}/{{item.MotoHzd}}</dd>
                                <dt class="b-goods-f__descr-title col-lg-5 col-md-12">车辆类型</dt>
                                <dd class="b-goods-f__descr-info col-lg-7 col-md-12">{{item.MotoType}}</dd>
                                <dt class="b-goods-f__descr-title col-lg-5 col-md-12">上市时间</dt>
                                <dd class="b-goods-f__descr-info col-lg-7 col-md-12">{{item.MotoTime}}</dd>
                                <dt class="b-goods-f__descr-title col-lg-5 col-md-12">排放标准</dt>
                                <dd class="b-goods-f__descr-info col-lg-7 col-md-12">{{item.MotoT1}}</dd>
                                <dt class="b-goods-f__descr-title col-lg-5 col-md-12">尺寸</dt>
                                <dd class="b-goods-f__descr-info col-lg-7 col-md-12">{{item.MotoCkg}}</dd>
                                <dt class="b-goods-f__descr-title col-lg-5 col-md-12">排量</dt>
                                <dd class="b-goods-f__descr-info col-lg-7 col-md-12">{{item.MotoPailiang}}</dd>

                                <dt class="b-goods-f__descr-title col-lg-5 col-md-12">压缩比</dt>
                                <dd class="b-goods-f__descr-info col-lg-7 col-md-12">{{item.MotoYsb}}</dd>
                                <dt class="b-goods-f__descr-title col-lg-5 col-md-12">离地间隙</dt>
                                <dd class="b-goods-f__descr-info col-lg-7 col-md-12">{{item.MotoLdjx}}</dd>
                                <dt class="b-goods-f__descr-title col-lg-5 col-md-12">最高时速</dt>
                                <dd class="b-goods-f__descr-info col-lg-7 col-md-12">{{item.MotoJiasu}}</dd>
                            </dl>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="section-gallery">
                                <ul class="nav nav-tabs" role="tablist">
                                    <li role="presentation" class="active"><a href="#gallery" aria-controls="gallery" role="tab" data-toggle="tab" data-action="gallery">产品详情</a></li>
                                    <li role="presentation"><a href="#feature" aria-controls="feature" role="tab" data-toggle="tab">产品参数</a></li>

                                </ul>

                                <div class="tab-content">
                                    <div role="tabpanel" class="tab-pane gallery active" id="gallery" style="padding:0px;">
                                        <p v-html="item.MotoContent"></p>
                                    </div>
                                    <div role="tabpanel" class="tab-pane " id="feature" style="padding:0px;">
                                        <div class="comments-area">
                                            <div class="inner-box">
                                                <!--Comment Box-->

                                                <div class="comment-box" v-for="comm in dataList">
                                                    <div class="comment">
                                                        <div class="author-thumb"><img src="~/assets/img/author.jpg" alt=""></div>
                                                        <div class="comment-inner">
                                                            <div class="comment-info clearfix"><strong>{{comm.PlName}}</strong></div>
                                                            <div class="text">{{comm.PlContent}}</div>
                                                            <ul class="post-info">
                                                                <li>{{comm.PlDate}}</li>
                                                               
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>


                                            </div>
                                            <div class="row">
                                                <div class="col-lg-12">
                                                    <div class="pagination">
                                                        <ul>
                                                            <li v-if="pageIndex>1"><a v-on:click="pageIndex--,pageClick()">上一页</a></li>
                                                            <li v-if="pageIndex==1"><a class="banclick">上一页</a></li>
                                                            <li v-for="index in indexPage" v-bind:class="{ 'active': pageIndex == index}">
                                                                <a v-on:click="btnClick(index)">{{index}}</a>
                                                            </li>

                                                            <li v-if="pageIndex!=all"><a v-on:click="pageIndex++,pageClick()">下一页</a></li>
                                                            <li v-if="pageIndex == all"><a class="banclick">下一页</a></li>
                                                        </ul>
                                                    </div>
                                                    <!--分页-->

                                                </div>
                                            </div>
                                        </div>
                                        <div class="comment-form" style=" margin-bottom:10px;">
                                            <div class="group-title"><h4>发表评论</h4></div>
                                            <div class="form-inner">
                                                <!--Comment Form-->
                                               
                                                <div class="row clearfix">
                                                    <div class="col-md-6 col-sm-6 col-xs-12 form-group">
                                                        <input type="text" v-model="AddForm.PlName" placeholder="姓名/称呼" required="">
                                                    </div>

                                                    <div class="col-md-6 col-sm-6 col-xs-12 form-group">
                                                        <input type="text" v-model="AddForm.PlHone" placeholder="联系方式" required="">
                                                    </div>
                                                    <div class="col-md-6 col-sm-6 col-xs-12 form-group" style="display:none;">
                                                        <input type="text" v-model="AddForm.PlAddress"  placeholder="" required="">
                                                    </div>
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
                                                        <textarea name="message" v-model="AddForm.PlContent" placeholder="评论内容"></textarea>
                                                    </div>
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group " style=" color:red;">
                                                        （评论提交后，等待管理员审核通过后即可呈现！）
                                                    </div>
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
                                                        <button class="theme-btn btn-style-two" @@click="onSubmit()">立即提交</button>
                                                    </div>

                                                </div>
                                                
                                            </div>
                                        </div>
                                    </div>



                                </div>

                            </div>
                        </div>
                    </div>


                </div>
                <div class="col-lg-4">
                    <aside class="l-sidebar">


                        <div class="b-seller" style=" background:#fff;">

                            <div class="b-seller__header bg-primary">
                                <div class="b-goods-f-price__main bg-primary">${{item.MotoPrice}}</div>
                            </div>
                            <div class="b-seller__main text-left">
                                <h5>{{item.MotoTitle}}</h5>
                                <h5>{{item.MotoSubtitle}}</h5>
                                <h5>{{item.MotoXingshi}}</h5>
                                <h5>{{item.MotoColor}}</h5>
                            </div>
                        </div>
                        <!-- end .b-seller-->
                        <div class="widget section-sidebar">
                            <h3 class="widget-title">联系我们</h3>
                            <div class="widget-content">

                                <div class="b-goods-f__descr-title">电话:4000000000</div>
                                <div class="b-goods-f__descr-title">地址:贵州省兴义市清水河镇金星村</div>
                                <div class="b-goods-f__descr-title">传真:5555555555</div>
                                <div class="b-goods-f__descr-title ">邮箱:3333@qq.com</div>
                                <div class="b-goods-f__descr-title ">联系人:</div>

                            </div>
                            <!-- end .widget-->

                        </div>
                    </aside>
                </div>
            </div>
        </section>
        <!-- end .b-goods-f-->

    </div>

</div>


<!-- Scale images-->
<script src="~/car/plugins/ofi.min.js"></script>
<!-- Video player-->
<script src="~/car/plugins/flowplayer/flowplayer.min.js"></script>
<!--Sliders-->

<!-- User customization-->

<script type="text/javascript">
    var vm = new Vue({
        el: "#detail",
        data: {
            id: 0,
            item: {},
            images: [],
            img: "",
            AddForm: {
                PlId:0,
                PlName: "",
                PlHone: "",
                PlSort: 0,
                PlAddress: '',
                PlContent: "",
                PlDate:'',
            },
            dataList: [],
            all: 0,//总页数
            pageIndex: 1, //当前页
            pageSize: 10, //每页条数
            indexPage: []
        },
        mounted() {
            this.getReq();//渲染之前
            this.getDetail();//获取数据
            this.getList(1);//获取评论
        },
        methods: {
           
            //获取News内容单条
            getDetail() {
                var that = this
                $.ajax({
                    type: 'GET',
                    url: '/api/Moto/GetFormJson?id=' + this.id,
                    data: {},
                    success: function (res) {
                        that.item = res.Result;
                        that.img = res.Result.ThumbImage;
                        that.AddForm.PlAddress = res.Result.MotoTitle;
                        vm.$forceUpdate();
                        that.images = res.Result.ThumbImage.split(";");// 在每个逗号(,)处进行分解  ["abc", "abcd", "aaa"]
                       
                        setTimeout(function () {
                            that.getImages();
                        }, 50)
                    }
                });

            },
            //图片列表
            getImages() {
                if ($('#main-slider').length) {

                    var sliderWidth = $("#main-slider").data("slider-width");
                    var sliderHeigth = $("#main-slider").data("slider-height");
                    var sliderArrows = $("#main-slider").data("slider-arrows");
                    var sliderButtons = $("#main-slider").data("slider-buttons");

                    $('#main-slider').sliderPro({
                        width: sliderWidth,
                        height: sliderHeigth,
                        arrows: sliderArrows,
                        buttons: sliderButtons,
                        fade: true,
                        fullScreen: true,
                        touchSwipe: false,
                        autoplay: true
                    });
                }
                if ($('.js-slider').length) {
                    $('.js-slider').slick();
                }
                if ($('.js-slider-for').length) {
                    $('.js-slider-for').slick({
                        arrows: false,
                        fade: true,
                        asNavFor: '.js-slider-nav'
                    });
                    $('.js-slider-nav').slick({
                        slidesToShow: 5,
                        slidesToScroll: 1,
                        asNavFor: '.js-slider-for',
                        focusOnSelect: true
                    });
                }
            },
            //获取评论
            getList(pageIndex) {
                var that = this
                $.ajax({
                    type: 'GET',
                    url: '/api/Comment/GetPageListJson?pageSize=' + this.pageSize + '&pageIndex=' + pageIndex + '&PlId=' + this.id +'&PlSort=1',
                    data: {},
                    success: function (res) {
                        that.dataList = res.Result,
                            that.all = res.TotalCount,
                        vm.$forceUpdate();
                        that.indexs();//分页
                    }
                });
            },
            //分页
            indexs() {
                var left = 1;
                var indexall = parseInt(this.all / this.pageSize);

                var arr = [];
                if (indexall == 0) {
                    arr.push(1);
                } else {
                    for (let i = 1; i <= indexall; i++) {
                        arr.push(i);

                    }
                }
                this.indexPage = arr;
                console.log(arr)

            },
            //分页
            btnClick: function (data) {//页码点击事件
                if (data != this.pageIndex) {
                    this.pageIndex = data
                }
                //根据点击页数请求数据
                this.getList(this.pageIndex);
            },
            pageClick: function () {
                //根据点击页数请求数据
                this.getList(this.pageIndex);
            },
            //获取url参数
            getReq() {
                var Requset = new Object;
                Requset = GetRequest();
                this.id = Requset["id"]
                this.AddForm.PlId = Requset["id"]
                this.getTime();
            },
            //提交评论http://localhost:5000/api/Comment/GetPageListJson?pageSize=10&pageIndex=1&PlId=180620981264453632
            onSubmit() {
               
                document.getElementById("loadingDiv").style.display = "block";//loading取消

                var that = this
             
                console.log(this.AddForm)
                $.ajax({
                    type: 'POST',
                    url: '/api/Comment/SaveFormJson',
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded"
                    },
                    data: this.AddForm,
                    success: function (res) {
                        console.log(res)
                        setTimeout(function () {
                            document.getElementById("loadingDiv").style.display = "none";//loading取消
                           window.location.reload();
                        }, 500)

                    }
                });

            },
            //获取时间
            getTime() {
                var _this = this;
                let yy = new Date().getFullYear();
                let mm = new Date().getMonth() + 1;
                let dd = new Date().getDate();
                let hh = new Date().getHours();
                let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
                let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
                _this.AddForm.PlDate = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf;
            },

        },
        created() {

        },
    })

</script>



